<template>
    <div class="upload-app">
        <div class="upload-view">
            <div :class="[tage===100?'lk-upload-disable':'lk-upload']" @click="handleClick">
                <input class="lk-upload-input" type="file" ref="uploadApk" id="uploadApk"  accept=".apk" @change="doUpload"/>
            </div>
            <i class="iconfont icon-app_icons-- version"></i>
        </div>
        <div class="upload-process" v-if="start">
            <span class="upload-file">{{fileName}}</span>
            <span style="margin-left:15px">{{tage+'%'}}</span>
            <i class="el-icon-circle-close del-close" @click="delFile"></i>
        </div>
    </div>
</template>
<script>
    import OSS from "ali-oss";
    import {get_sts_token} from "@/api/upload";

    export default {
        data() {
            return {
                client: null,
                tage: 0,
                start: false,
                fileName: "",
                ossToken: {},
            };
        },
        mounted() {
            this.initClient();
        },
        methods: {
            /**
             * 删除文件
             */
            delFile() {
                this.fileName = "";
                this.start = false;
                this.tage = 0;
            },
            /**
             *点击事件
             */
            handleClick() {
                if (this.tage === 100) {
                    return;
                }
                this.$refs.uploadApk.click();
            },
            /**
             * 上传事件
             */
            doUpload() {
                let ele = document.getElementById("uploadApk");
                const files = ele.files;
                let file = files[0];
                if (!file) {
                    return;
                }
                if (file.type !== "application/vnd.android.package-archive") {
                    this.$message.error("请上传安卓文件");
                    return;
                }
                if (file.size > 200 * 1024 * 1024) {
                    this.$message.error("请上传小于200M的文件");
                    return;
                }
                this.fileName = file.name;
                this.start = true;
                this.client
                    .multipartUpload("apk/" + this.fileName, file, {
                        progress: (p) => {
                            this.tage = Math.round(100 * p);
                        },
                    })
                    .then(() => {
                        this.$emit("success", this.ossToken.prefix + "/apk/" + this.fileName);
                    });
            },
            /**
             * 初始化客户端
             */
            initClient() {
                get_sts_token().then((res) => {
                    this.ossToken = res.data;
                    this.client = new OSS({
                        accessKeyId: res.data.accessKeyId,
                        accessKeySecret: res.data.accessKeySecret,
                        stsToken: res.data.securityToken,
                        bucket: res.data.bucket,
                    });
                });
            },
        },
    };
</script>
<style lang="less" scoped>
    .del-close {
        margin-left: 20px;
        cursor: pointer;
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .upload-file {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-app {
        width: 200px;
    }

    .upload-process {
        color: #555555;
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .lk-upload {
        cursor: pointer;
    }

    .lk-upload-disable,
    .lk-upload {
        z-index: 100;
        box-sizing: border-box;
        width: 200px;
        height: 80px;
        border-radius: 4px;
        border: 1px dashed #d9d9d9;
        position: relative;
    }

    .lk-upload:hover {
        border: 1px dashed #409eff;
    }

    .lk-upload-input {
        display: none;
    }

    .upload-view {
        position: relative;
        display: inline-block;
    }

    .version {
        color: #d9d9d9;
        font-size: 40px;
        z-index: 99;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
</style>